/**
 * 组件通讯的三种基本方式
 * 
 * 父组件<=子组件
 * 
 */

 import React from 'react'

 class Parent extends React.Component{
   
     constructor(props) {
         super(props)
         // 父组件状态，父组件的数据
         this.state = {
             lastName: '王'
         }
     }

    // 父组件定义一个函数
 
     render() {
         return (
             <div>
                 <div>我是父组件，我姓：{this.state.lastName}</div>
                 <hr/>
                 {/* 将父组件定义的函数传递到子组件 */}
                 <Child
                    lastName={this.state.lastName}

                />
             </div>
         )
     }
 
 }
 
 class Child extends React.Component {
     constructor(props) {
         super(props)
         // 子组件自身状态
         this.state = {
              
         }
     }

     handleClick = () => {
        // 在子组件调用父组件传递进来的函数
     }

     render(){
         console.log('child props', this.props)
         return(
             // 显示父组件传递的数据
             <div>
                <div>我是子组件,我姓: {this.props.lastName}</div>
                <button onClick={this.handleClick}>在子组件调用父组件传递进来的函数</button>
             </div>
         )
     }
 }
 
 export default Parent